<template>
  <div class="up-load-container">
    <div class="up-load-title">
      {{ title }}
    </div>

    <el-upload :limit="0" class="avatar-uploader" action="/api/upload" :show-file-list="false" :headers="headers"
      :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
      <img v-if="value" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
import { URL_CONFIG } from "@/urlConfig.js"

export default {
  name: 'UpLoad',
  data() {
    return {
      defaultUrl: 'https://avatars.githubusercontent.com/u/165580199?v=4'
    }
  },
  props: ['title', 'value'],
  computed: {
    imageUrl() {
      if (this.value) {
        console.log("this.urlthis.urlthis.url：：", this.value)
        // return URL_CONFIG + this.value
        return this.value
      } else {
        return this.defaultUrl
      }
    },
    headers() {
      return {
        Authorization: 'Bearer ' + localStorage.getItem("TOKEN")
      }
    }
  },
  methods: {
    handleAvatarSuccess(ret) {
      console.log('上传成功', ret.data, this.imageUrl)
      if (!ret.code && ret.data) {
        this.$emit('input', ret.data)
      }
    },
    beforeAvatarUpload(file) {
      // // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 <= 20;

      // // if (!isJPG) {
      // //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过【2MB!】');
      // }
      // return isLt2M;

      return true
    }
  }
}
</script>

<style scoped>
.up-load-title {
  font-weight: inherit !important;
  font-weight: 100;
  margin-bottom: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader :hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
